<template>
    <div class="right2">
        <section class="section">
            <div class="section__title">续保类型出单量占比</div>
            <div class="chart-box">
                <div class="chart" ref="chartDom"></div>
            </div>
        </section>

        <section class="section">
            <div class="section__title">经销商门店的续保单Top5</div>
            <div class="table-box">
                <table>
                    <thead>
                        <tr>
                            <th>排名</th>
                            <th>省份</th>
                            <th>续保单数</th>
                            <th>续保率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in useTop5List" :key="index">
                            <td >{{item.rn}}</td>
                            <td >{{item.province}}</td>
                            <td >{{item.value}}</td>
                            <td >{{item.rate}}%</td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </section>
    </div>

</template>

<script setup>
import { ref, onMounted,computed,onBeforeUnmount} from 'vue'
import * as echarts from 'echarts'  
import { rem2px } from "../../utils/scale"


// 获取图表DOM
const chartDom = ref(null)
let myChart = null
const chartOption=ref(null)

//模拟数据
const list=ref([
  {
    name:'新转续占比',
    value:Math.round(Math.random()*100),
    bgColor:'#5DA2F3',
    colors:['#2d79f3','#0003F3'] 
  },
  {
    name:'续转续占比',
    value:Math.round(Math.random()*100),
    bgColor:'#A1FB8E',
    colors:['#68d13f','#25D102'] 
  },
  {
    name:'非转续占比',
    value:Math.round(Math.random()*100),
    bgColor:'#F08784',
    colors:['#FF1402','#a6133f'] 
  },
])

//模拟数据
const Top5List=ref([
    {province:'湖北省',value:Math.round(Math.random()*100)},
    {province:'AXX省',value:Math.round(Math.random()*100)},
    {province:'BXX省',value:Math.round(Math.random()*100)},
    {province:'CXX省',value:Math.round(Math.random()*100)},
    {province:'DXX省',value:Math.round(Math.random()*100)},
])
const useTop5List = computed(() => {
    const chineseNum = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
    const sum=Top5List.value.reduce((acc, cur) => acc + cur.value, 0);
    return [...Top5List.value] // 拷贝原数组避免修改原始数据
        .sort((a, b) => b.value - a.value) // 按 value 从大到小排序
        .map((item, index) => ({
        ...item,
        rate: (item.value / sum *100).toFixed(2),
        rn:`第${chineseNum[index]}名`, // 添加排名字段 rn
        }));
});

const pieOption=(title,series)=>(  {
  title,
  tooltip:{show:false},
  series
})



const updatePieOption = () => {
  const leftList=['20%','50%','80%']
  const title=list.value.map((item,index)=>({
    text: item.name,
    left: leftList[index],
    top: '12%',
    textAlign: 'center',  // 让文字居中
    textStyle: {
      color: '#fff',
      fontSize:rem2px(1),
      letterSpacing: 2,
    }
  }))
  const series = list.value.flatMap((item, index) => {
    const centerX = leftList[index]
    const value = item.value;
    const radiusX=45
    return [
      {//内圈
        // name: `${item.name}-内圈`,
        type: 'pie',
        radius: ['0%', `${radiusX + 1.5}%`], // 固定内圈半径
        center: [centerX, '60%'],
        label: { show: false },
        data: [
          {
            value: 1,
            itemStyle: { color: item.bgColor }
          }
        ]
      },
      {//外圈
        // name: `${item.name}-外圈`,
        type: 'pie',
        radius: [`${radiusX}%`, '50%'], // 固定外圈半径
        center: [centerX, '60%'],
        label: {
          show: true,
          position: 'center',
          formatter: `${value}%`,
          fontSize:rem2px(1.4),
          color: '#555',
        },
        data: [
          {
            value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: item.colors[0]},
                { offset: 1, color: item.colors[1] }
              ]),
              borderRadius: 8
            }
          },
          {
            value: 100 - value,
            itemStyle: { color: 'transparent' }
          }
        ]
      }
    ];
  });

  // 生成图表配置
  chartOption.value = pieOption(title, series);
  console.log(chartOption.value)

  if (chartDom.value) {
    myChart = echarts.init(chartDom.value); // 这里必须用window.echarts
    myChart.setOption(chartOption.value); // 注意要.value
  }
};

// 初始化图表
onMounted(() => {
  if (chartDom.value) {
    myChart = echarts.init(chartDom.value);

    updatePieOption()
    
    const observer = new ResizeObserver(() => {
      myChart?.resize();
    });
    observer.observe(chartDom.value);

    onBeforeUnmount(() => {
      observer.disconnect(); // 停止监听
      myChart?.dispose();
    });
  }

});

</script>


<style lang="scss" scoped>
@import "../../assets/style/main.scss";
$color-border:#494949;
$color-green:#57f13c;
$color-red:#a6133f;

.right2{
    width: 100%;
    height: 12.6rem;
    margin-top: 0.6rem;  
    display: flex;
}
.section{  
    width: 100%;
    height: inherit;
    &:nth-of-type(1){
        width: 50rem;
        margin-right: .8rem;
    }
}
.chart-box{
    width: 100%;
    height: 10.8rem;
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    display: flex;
    background-color: rgba(0,0,0,0.2);
    .chart{
        width: 100%;
        height: 100%;
    }
}
.table-box{
    width: 100%;
    height: 10.8rem;
    border-top: 1px solid $color-border;
    border-bottom: 1px solid $color-border;
    display: flex;
    background-color: rgba(0,0,0,0.2);
    table{
        width: 100%;
        height: 100%;
        border-collapse: collapse;
        text-align: center;
        font-weight: 100;
        font-size: .9rem;
        thead{
            border-bottom: 1px solid $color-border;
        }
        tbody{
            tr{
                border-bottom: 1px solid rgba($color-border,0.2);
                &:nth-last-child(1){
                    border: none;
                }
            }
        }
    }
}
</style>    